<template>
  <div class="setting">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <!-- 按钮 -->
          <el-button
            calss="btn"
            type="primary"
            icon="el-icon-plus"
            @click="showDialog = true"
            >新增角色</el-button
          >
          <!-- 表格 -->
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="角色名" width="180">
            </el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button type="primary" size="small">分配权限</el-button>
                <el-button
                  style="margin:0 10px 0 20px"
                  type="info"
                  @click="editrole(row.id)"
                  size="small"
                  >修改</el-button
                >
                <el-button type="danger" @click="delrole(row.id)" size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页导航 -->
          <el-pagination
            layout="total,prev, pager, next"
            :current-page.sync="pageInfo.page"
            :total="pageInfo.total"
            :page-size="pageInfo.pagesize"
            @current-change="getRoleList"
          />
        </el-tab-pane>
        <!-- 公司信息 -->
        <el-tab-pane label="公司信息" name="second">
          <!-- 表单 -->
          <el-form label-width="80px" :model="formLabelAlign" disabled>
            <el-form-item label="企业名称" style="width:450px">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址" style="width:450px" disabled>
              <el-input v-model="formLabelAlign.companyAddress"></el-input>
            </el-form-item>
            <el-form-item label="公司电话" style="width:450px" disabled>
              <el-input v-model="formLabelAlign.companyPhone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" style="width:450px" disabled>
              <el-input v-model="formLabelAlign.mailbox"></el-input>
            </el-form-item>
            <el-form-item label="备注" style="width:450px" disabled>
              <el-input v-model="formLabelAlign.remarks"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 对话框 -->
    </el-card>
    <el-dialog :title="title" :visible.sync="showDialog" @close="outAdd">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="角色名称" label-width="120px" prop="name">
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="120px" prop="description">
          <el-input v-model="addForm.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outAdd">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 获取所有角色列表,根据ID删除角色,添加角色,根据ID获取角色信息,根据ID更新角色
import {
  getRoleList,
  delRole,
  addRole,
  getRole,
  alterRole
} from '@/api/setting'
import { companyId } from '@/api/department'
export default {
  name: 'setting',
  data () {
    return {
      addForm: {},
      // 弹窗显示
      showDialog: false,
      // tap栏切换
      activeName: 'first',
      // 表格数据
      tableData: [],
      // 分页数据
      pageInfo: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      //公司表单数据
      formLabelAlign: {},
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      }
    }
  },
  // vue生命周期钩子
  created () {
    this.getRoleList()
    this.getComanyInfo()
  },
  methods: {
    // 获取所有角色列表
    async getRoleList () {
      // 发请求获取数据
      let res = await getRoleList(this.pageInfo)
      // 存储服务器数据
      this.tableData = res.data.rows
      this.pageInfo.total = res.data.total
    },
    // 根据ID删除角色
    async delrole (id) {
      try {
        // 提示
        await this.$confirm('确认要删除吗？')
        // 发起请求
        await delRole(id)
        // 重新刷新数据
        await this.getRoleList()
        // 提示
        this.$message.success('删除成功')
      } catch {
        // 提示
        this.$message.success('取消成功')
      }
    },
    // 添加按钮的点击事件
    addRole () {
      // 通过ref属性validate获取form数据
      this.$refs.addForm.validate(async v => {
        if (v) {
          if (this.addForm.id) {
            //编辑角色
            //发起请求根据ID更新角色
            await alterRole(this.addForm)
          } else {
            //新增角色
            // 发起请求,添加角色
            await addRole(this.addForm)
          }
          // 重新获取最新数据
          this.getRoleList()
          //提示用户信息
          this.$message.success(this.title + '成功')
          // 关闭弹窗
          this.showDialog = false
          this.addForm = {}
        }
      })
    },
    // 取消按钮事件
    outAdd () {
      this.addForm = {}
      this.$refs.addForm.resetFields()
      this.showDialog = false
    },
    // 修改员工信息
    async editrole (id) {
      this.showDialog = true
      let res = await getRole(id)
      this.addForm = res.data
    },
    //获取公司数据
    async getComanyInfo () {
      let res = await companyId(this.$store.getters.companyId)
      this.formLabelAlign = res.data
    }
  },
  //计算属性
  computed: {
    title () {
      return this.addForm.id ? '编辑角色' : '新增角色'
    }
  }
}
</script>

<style lang="scss">
.setting {
  .el-card {
    padding: 50px 50px 140px;
  }
  .el-button[calss='btn'] {
    margin: 5px 0 15px;
  }
  .el-pagination {
    text-align: center;
  }
  .el-table__header th {
    background-color: #f5f7fa;
    height: 60px;
    text-align: center;
  }
  .el-table__body td {
    text-align: center;
  }
  .el-form {
    width: 500px;
    margin: 20px auto 0;
  }
  .el-pagination {
    margin-top: 10px;
  }
}
</style>
